<template>
  <div class="img-detail">
   <!-- 顶部组件 -->
   <My-Header header_title="图文详情"></My-Header>

   <div>
      <h3 class="img-title">{{imgDesc.title}}</h3>
      <p class="img-info">
        <span class="time">{{imgDesc.add_time | handleTime}}</span>
        <span>{{imgDesc.click}}次点击</span>
        <span>分类：嘻嘻嘻</span>
      </p>
    </div>
    <ul>
      <li>
        <!-- 使用了 vue-preview插件 -->
        <vue-preview :slides="imgList" @close="handleClose"></vue-preview>
      </li>
    </ul>
    <div class="content" v-html="imgDesc.content"></div>
    <!-- 使用评论组件 -->
    <comment :newsId="id"></comment>
  </div>
</template>

<script>
// 引入已封装好MyHeader组件
import MyHeader from '@/components/MyHeader'
// 引入已封装好comment组件
import comment from '@/components/comment'
// 引入封装好的请求函数
import { getThumImg, getThumDesc } from '@/api'

export default {
  // 注入组件
  components: {
    MyHeader,
    comment
  },
  data () {
    return {
      // 当前图文对应的id
      id: this.$route.params.id,
      // 当前图文对应的缩略图
      imgList: [],
      // 当前缩略图的描述
      imgDesc: []
    }
  },
  created () {
    /* 初始化图文详情页 */
    this.initImgDetail()
  },
  methods: {
    /* 初始化图文详情页 */
    initImgDetail () {
      /* 获取图片详情缩略图 */
      getThumImg(this.id).then(res => {
        if (res.status === 0) {
          // 遍历：生成每张缩略图的字段信息
          res.message.map(item => {
            // vue-preview插件要求的数据
            let img = {
              src: item.src,
              msrc: item.src,
              alt: 'picture1',
              title: 'Image Caption 1',
              w: 600,
              h: 400
            }
            // 添加到数组中
            this.imgList.push(img)
          })
        }
      })
      /* 获取缩略图描述 */
      getThumDesc(this.id).then(res => {
        if (res.status === 0) {
          // 存储缩略图描述信息
          this.imgDesc = res.message[0]
        }
      })
    },
    /* vue-preview插件事件 */
    handleClose () {
      console.log('close event')
    }
  }
}
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  li > div > div{
    display: flex;
    flex-wrap: wrap;
    &>figure{
      width: 33.33%;
    }
  }
</style>

<style lang="scss" scoped>
.img-detail {
  margin-top: 40px;
  margin-bottom: 55px;

  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
